<template>
  <div>
    <px-table v-loading="loading" :data="typeList" height="200" show-overflow-tooltip border>
      <px-table-column label="Time" prop="time">
        <template #default="scope">
          <span>{{ scope.row.time ? scope.row.time : "-" }}</span>
        </template>
      </px-table-column>
      <px-table-column label="Alarm Type" prop="alarmtype">
        <template #default="scope">
          <span>{{ scope.row.alarmtype ? scope.row.alarmtype : "-" }}</span>
        </template>
      </px-table-column>

      <px-table-column label="Value(ppm)" prop="value">
        <template #default="scope">
          <span>{{ scope.row.value ? scope.row.value : "-" }}</span>
        </template>
      </px-table-column>

      <px-table-column label="Indicate Name" width="160" prop="indicateName">
        <template #default="scope">
          <span>{{ scope.row.indicateName ? scope.row.indicateName : "-" }}</span>
        </template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" align="center" width="140">
        <template #default="scope">
          <px-button v-if="scope.row.status != 'INVALID'" link type="primary" @click="handleEditor(scope.row.id)">
            <px-tooltip class="box-item" content="编辑" placement="top">
              <px-icon><EditPen /></px-icon> </px-tooltip
          ></px-button>
        </template>
      </px-table-column>
      <template #empty>
        <px-empty :image-size="150" />
      </template>
    </px-table>

    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      style="margin-bottom: -10px"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref, toRefs, reactive } from "vue";
const total = ref(10);
const loading = ref(true);
const data = reactive({
  typeList: [],
  queryParams: {
    orderByColumn: "",
    isAsc: "",
    planName: "",
    checkTypeCode: "",
    approveStatus: "",
    taskStatus: "",
    createrId: "",
    orderBy: "",
    pageNum: 1,
    pageSize: 20
  }
});
const { queryParams, typeList } = toRefs(data);
function getList() {
  loading.value = true;
  typeList.value = [
    {
      time: "2024-02-01 12:12:12",
      alarmtype: "ooc",
      value: 22,
      indicateName: "MIX-H2M2 01 BRD B浓度"
    }
  ];
  loading.value = false;
}
getList();
const handleEditor = async val => {};
</script>
